<template>
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="lightblue"
    >
      <van-swipe-item
        v-for="item in gallery"
        :key="item.id"
      >
        <img
          v-lazy="item.img_url"
          :alt="item.img_desc"
        >
      </van-swipe-item>
    </van-swipe>
    <PurchaseTips />
    <section class="productInfo">
      <h3>{{productInfo.name}}</h3>
      <p>{{productInfo.goods_brief}}</p>
      <div class="price">{{productInfo.retail_price | priceFilter}}</div>
      <van-cell
        title="展示弹出层"
        is-link
        @click="showSku"
      />
    </section>
    <!-- 商品参数区 -->
    <div class="productAttribute">
      <h3>商品参数</h3>
      <ul>
        <li
          v-for="(item,index) in productAttribute"
          :key="index"
        >
          <span>{{item.name}}</span>
          <p class="van-ellipsis">{{item.value}}</p>
        </li>
      </ul>
    </div>
    <!-- 商品的图片详情描述 -->
    <div class="imgDescWrapper">
      <!-- 分割线 -->
      <div class="hrLine">
        <div class="textArea">商品详情</div>
      </div>
      <div
        class="imgDesc"
        ref="imgDesc"
      >
      </div>
    </div>
    <!-- 常见问题 -->
    <div class="issueWrapper">
      <!-- 分割线 -->
      <div class="hrLine">
        <div class="textArea">常见问题</div>
      </div>
      <ul>
        <li
          v-for="item in issue"
          :key="item.id"
        >
          <h4>{{item.question}}</h4>
          <p>{{item.answer}}</p>
        </li>
      </ul>
    </div>
    <!-- 相关商品 -->
    <div class="relatedgoods">
      <!-- 分割线 -->
      <div class="hrLine">
        <div class="textArea">相关商品</div>
      </div>
      <ProductResult :goodsList="relatedGoodsList" />
    </div>
    <!-- Sku商品规格 -->
    <van-sku
      ref="sku"
      v-model="isShowSku"
      :sku="sku"
      :goods="skuGoods"
      :hide-stock="sku.hide_stock"
    />
    <!-- 底部商品功能   -->
    <MyGoodsAction
      @addToCart="addToCart"
      :newBadge="newBadge"
    />

  </div>
</template>

<script>
import {
  GetProductDetails,
  GetRelatedGoodsList,
  AddToCart,
  GetGoodsNum_Cart,
} from "@/request/api";
import PurchaseTips from "@/components/PurchaseTips.vue";
import ProductResult from "@/components/SearchPopup/SearchProduct/ProductResult/ProductResult.vue";
import MyGoodsAction from "@/components/MyGoodsAction.vue";

export default {
  data() {
    return {
      //商品详情图片数组
      gallery: [],
      //商品详情
      productInfo: {},
      //商品参数
      productAttribute: [],
      //常见问题
      issue: [],
      //相关商品
      relatedGoodsList: [],
      //Sku商品规格
      isShowSku: false,
      sku: {
        tree: [],

        price: "1.00", // 默认价格（单位元）
        stock_num: 0, // 商品总库存
        hide_stock: false, // 是否隐藏剩余库存
      },
      skuGoods: {
        // 默认商品 sku 缩略图
        picture: "",
      },
      //添加购物车请求参数
      addCartParams: {
        goodsId: "",
        productId: "",
        number: 0,
      },
      //购物车产品总数量
      newBadge: 0,
    };
  },

  created() {
    this.getGoodsData();
  },
  components: { PurchaseTips, ProductResult, MyGoodsAction },

  methods: {
    //获取数据
    async getGoodsData() {
      // console.log(this.$route.params);
      // console.log(this.$route.query);
      // console.log(this.$route);
      //通过id请求商品数据
      let goodsId = this.$route.query.queryId;
      let res = await GetProductDetails({
        params: { id: goodsId },
        // params: { id: this.$route.params.id },
      });
      // console.log("商品数据", res);
      if (res.errno !== 0) {
        return this.$toast.fail("请求商品详情数据失败！");
      }
      let { gallery, info, attribute, issue, productList } = res.data;
      this.gallery = gallery;
      this.productInfo = info;
      this.productAttribute = attribute;
      // 商品的图片详情描述渲染
      this.$refs.imgDesc.innerHTML = info.goods_desc;
      this.issue = issue;

      //通过id请求相关商品数据
      let relatedRes = await GetRelatedGoodsList({
        params: { id: goodsId },
      });
      if (relatedRes.errno !== 0) {
        return this.$toast.fail("获取相关商品数据失败！");
      }
      // console.log(relatedRes);
      this.relatedGoodsList = relatedRes.data.goodsList;
      //渲染sku组件数据
      this.skuGoods.picture = info.list_pic_url;
      this.sku.stock_num = info.goods_number;
      this.sku.price = info.retail_price;

      //保存加入购物车请求所需的参数
      this.addCartParams.productId = productList[0].id;

      //请求购物车产品数量数据，渲染数量的初始值
      let token = localStorage.getItem("token");
      //token存在，则发送请求
      if (token) {
        let res = await GetGoodsNum_Cart();
        // console.log("购物车产品数量", res);
        if (res.errno !== 0) {
          if (res.errno == 400) {
            return this.$toast("库存不足!");
          } else {
            return this.$toast(res.errmsg);
          }
        }
        this.newBadge = res.data.cartTotal.goodsCount;
      }
    },
    //点击弹出层，展示Sku组件
    showSku() {
      this.isShowSku = true;
    },
    //监听子组件抛出的加入购物车事件。
    async addToCart() {
      //判断Sku是否为显示状态
      if (this.isShowSku) {
        //先判断是否已经登录
        let token = localStorage.getItem("token");
        if (token) {
          //整合添加购物车请求参数,其中productId在请求商品数据时已保存。
          this.addCartParams.goodsId = this.$route.query.queryId;
          //通过sku组件引用获取选择添加的商品数量
          this.addCartParams.number = this.$refs.sku.getSkuData().selectedNum;
          let _this = this;
          //发送添加到购物车请求
          let res = await AddToCart(_this.addCartParams);
          console.log("添加购物车请求：", res);
          //判断请求结果
          if (res.errno !== 0) {
            if (res.errno == 400) {
              return this.$toast("库存不足!");
            }
            return this.$toast(res.errmsg);
          }
          let { cartTotal } = res.data;
          //需要将最新的购物车产品总数量渲染到购物车徽标。
          //需要用props，但是在GoodsAction组件里已经定义了一个badge,created时发起购物车产品总数量请求并修改了该badge。
          //又不能将值保存绑定给传过去props，因为这样又修改了单向数据流。vue警告，GoodsAction组件在crated也无法赋值props拿到数据渲染。
          //用其它传值方式如$parent。我需要在created拿到一次数据并赋值给后面渲染。created时初值是父组件那里的值是0,要点击加如购物车才会重新赋值。
          //又不能给badege绑定两个数据，一个在GoodsAction组件在crateds时请求到的，一个是加入购物车请求返回的新值。
          //所以，应该把购物车产品总数量请求也放到这个组件中，保存在父组件badge，然后传递通过props传递给GoodsAction组件绑定。
          //然后加入购物车请求返回的数据赋值修改父组件badge(组件内修改数据)，响应式传递给GoodsAction组件更新。
          this.newBadge = cartTotal.goodsCount;
          //加入购物车成功，关闭sku组件,跳转到购物车
          this.isShowSku = false;
          // this.$router.push("/cart");
        } else {
          this.$toast.fail("请先登录");
          setTimeout(() => {
            return this.$router.push("/user");
          }, 1000);
        }
      } else this.isShowSku = true;
      //未登录，提示
    },
  },
  watch: {
    $route(newVal, oldVal) {
      // console.log(newVal, oldVal);
      if (newVal.fullPath !== oldVal.fullPath) {
        //重新赋值不起作用？谢特，眼瞎。起作用了，但是接口返回的相关商品是一样的，我以为没变！
        //那只需要再返回页面顶部就行了。
        this.getGoodsData();
        window.scrollTo(0, 0);
        //重新加载页面,有一瞬间空白!体验不佳
        //法一:
        // location.reload();
        //法二:
        // this.$router.go(0);
        //法三:
        //携带新路由的参数跳转空白组件然后在空白组件的created钩子拿到执行跳转到对应的参数的路径.
        //仅路由跳转,没有刷新操作,地址栏瞬间变化,肉眼看不见,剩下就是刷新请求数据的时间了.
        // this.$router.replace({
        //   path: "/empty",
        //   query: { queryId: newVal.query.queryId, from: "productdetails" },
        // });
        //法四:
        //调用app.vue提供的reload方法控制<router-view>渲染,实现刷新功能.
        // this.$router.push(`/productdetails?queryId=${newVal.query.queryId}`);
        // this.getGoodsData();
        // this.reload();
      }
    },
  },
  inject: ["reload"],
};
</script>

<style lang='less' scoped>
.van-swipe {
  img {
    width: 100%;
  }
}
//商品信息
.productInfo {
  background-color: #fff;
  margin: 0 0.1rem;
  border-radius: 0.1rem;
  text-align: center;
  vertical-align: middle;
  //高度塌陷，开启BFC
  overflow: hidden;
  h3 {
    font-size: 0.18rem;
    margin: 0.15rem 0;
  }
  p {
    margin: 0.1rem 0;
  }
  .price {
    margin: 0.1rem 0;
    color: darkred;
  }
  .van-cell {
    font-size: 0.14rem;
    text-align: left;
    vertical-align: middle;
  }
}
//商品参数
.productAttribute {
  background-color: #fff;
  border-radius: 0.1rem;
  margin: 0.1rem;
  padding: 0.1rem;
  h3 {
    font-size: 0.16rem;
  }
  ul {
    li {
      background-color: #efefef;
      height: 0.3rem;
      margin-bottom: 0.05rem;
      border-radius: 0.05rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        width: 26%;
        text-align: right;
      }
      p {
        flex: 1;
        padding-left: 0.1rem;
        // text-align: left;
      }
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

//商品图片描述,
.imgDescWrapper {
  // 对于v-html= 或者 利用引用this.$refs.xxx.innerHTML= HTML字符串形式的渲染。
  // 需要深度作用选择器去为HTML字符串里的元素设置样式。
  background-color: #fff;
  /deep/.imgDesc {
    img {
      width: 100%;
    }
  }
}

//分割线样式
.hrLine {
  height: 0.4rem;
  position: relative;
  .textArea {
    width: 28%;
    text-align: center;
    background-color: #fff;
    //垂直居中
    height: 0.4rem;
    line-height: 0.4rem;
    position: absolute;
    // 水平居中
    left: 50%;
    margin-left: -14%;
    //这里水平居中如果仅用margin，可以。但是就不能盖住线了，
    //因为线是开启定位，脱离文档流。如果线没定位那两者就同在文档流，遮盖不了。
    // margin: 0 auto;
  }
  //这里应该用before,不用去调整层级就可以让文字区域盖住它。
  &::before {
    content: "";
    width: 60%;
    height: 0.01rem;
    background-color: #ccc;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -0.005rem;
    margin-left: -30%;
  }
}
//常见问题
.issueWrapper {
  background-color: #fff;
  margin-top: 0.1rem;
  padding-bottom: 0.1rem;
  ul {
    li {
      margin-left: 0.2rem;
      position: relative;
      h4 {
        font-size: 0.14rem;
        height: 0.25rem;
        line-height: 0.25rem;
        // position: relative;
        // &::before {
        //   content: "";
        //   width: 0.04rem;
        //   height: 0.04rem;
        //   background-color: #000;
        //   position: absolute;
        //   left: -0.1rem;
        //   //垂直居中于标题
        //   top: 50%;
        //   margin-top: -0.02rem;
        // }
      }
      p {
        font-size: 0.12rem;
        padding: 0;
      }
      &::before {
        content: "";
        width: 0.04rem;
        height: 0.04rem;
        background-color: #000;
        position: absolute;
        left: -0.1rem;
        //垂直居中于标题
        top: 0.125rem;
        margin-top: -0.02rem;
      }
    }
  }
}
//为什么这个能直接作用到第三方组件的子组件？
//默认是min-height: 50%;太高了。
.van-sku-container {
  min-height: 0;
}
//相关商品
.relatedgoods {
  background-color: #fff;
  margin-top: 0.1rem;
}
</style>